<template>

  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>专业负责人</el-breadcrumb-item>
      <el-breadcrumb-item>学期课程信息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="searchForm">

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryInfo.query" placeholder="请输入课程名称" clearable @clear="getUserList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="getCourseList" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-button style="position: absolute; right: 720px" type="" @click="addDialogVisible=true">添加课程</el-button>
      </el-form>



      <el-dialog title="添加课程" :visible.sync="addDialogVisible" width="40%" @close="addDialogClose">
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">




          <el-form-item label="课程名称" prop="cname">
            <el-select v-model="addForm.cname" placeholder="请选择" @change="getCname()" clearable>
              <el-option v-for="item in CnameList" :key="item.cname" :label="item.cname" :value="item.cname">
              </el-option>
            </el-select>

          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCourseBase">确 认</el-button>
        </div>
      </el-dialog>



      <el-table :header-cell-style="{background:'#808080',color:'#FFFFFF'}" border stripe :data="List" style="width: 100%">


        <el-table-column prop="cname" label="课程" width="" align="center">
        </el-table-column>

        <el-table-column label="删除" align="center">
          <template slot-scope="scope">

            <el-tooltip class="item" effect="dark" content="删除课程" placement="top-start">
              <el-button type="" icon="el-icon-delete" circle @click="deleteCourse(scope.row.cname)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>



      </el-table>







    </div>

    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[4]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>

</template>


<script>
  export default {

    created(){
      this.getCourseList();
      this.getCname();
    },
    data() {
      return {
        queryInfo:{
          query:'',//查询信息
          role:this.$session.get('termname'),
          pageNum:1,
          pageSize:4
        },
        queryInfo1:{
          query:'',//查询信息
          role:'C',
          pageNum:1,
          pageSize:20
        },
        List:[],
        CnameList:[],
        total:0,
        addDialogVisible:false,
        editDialogVisible:false,
        infoDialogVisible:false,

        addForm:{
          cname:'',
          termname:this.$session.get('termname'),
          ords:this.$session.get('ords'),
        },

        addFormRules: {
          cname:[
            { required: true, message:'请选择', trigger: 'blur' },

          ],

        },



      }
    },


    methods: {
      async getCname () {
        const { data: res } = await this.$http.get("Courses/AllCname" ,{ params: this.queryInfo1 });
        this.CnameList = res.data;
      },
      async getCourseList () {
        const { data: res } = await this.$http.get("ProfesTermCourses/AllProfesTermCourse", { params: this.queryInfo })
        this.List = res.data;
        this.total = res.numbers;
      },



      async deleteCourse (cname) {

        const confirmResult = await this.$confirm('是否删除该课程？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult !== 'confirm') {
          return ;
        }
        const { data: res } = await this.$http.delete("ProfesTermCourses/ProfesTermCourse?cname=" + cname);
        if (res !== "success") {
          return this.$message.error("删除失败");
        }
        this.$message.success("删除成功");
        this.getCourseList();
      },
      addCourseBase () {
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return;
          for(var i = 0 ;i < this.List.length;i++){
            if(this.addForm.cname == this.List[i].cname){
              return this.$message.error("课程已存在!")
            }
          }
          const { data: res } = await this.$http.post("ProfesTermCourses/ProfesTermCourse", this.addForm);
          if(res == "courseerror"){
            return this.$message.error("该课程未满足先修条件！");
          }
          if (res !== "success") {
            return this.$message.error("课程已存在!")
          }
          this.$message.success("添加成功！")
          this.addDialogVisible = false;
          this.getCourseList();
        })
      },

      handleSizeChange (newSize) {
        this.queryInfo.pageSize = newSize;
        this.getCourseList();
      },
      handleCurrentChange (newPage) {
        this.queryInfo.pageNum = newPage;
        this.getCourseList();
      },
      addDialogClose () {
        this.$refs.addFormRef.resetFields();
      },
      editDialogClose () {
        this.$refs.editFormRef.resetFields();
      },
    }
  }
</script>




<style scoped>
  .searchForm{
    margin-top: 40px;
  }
</style>

